<div *ngFor="let file of items" class="ant-upload-list-item ant-upload-list-item-{{file.status}}" @itemState>
  <ng-template #icon>
    <ng-container *ngIf="showPic; else noPicTpl">
      <div *ngIf="listType === 'picture-card' && file.status === 'uploading'; else thumbUrlCheck" class="ant-upload-list-item-uploading-text">{{ locale.uploading }}</div>
    </ng-container>
    <ng-template #thumbUrlCheck>
      <i *ngIf="!file.thumbUrl && !file.url; else thumbTpl"
        class="ant-upload-list-item-thumbnail" nz-icon nzType="picture" nzTheme="twotone"></i>
    </ng-template>
    <ng-template #thumbTpl>
      <a class="ant-upload-list-item-thumbnail" target="_blank" rel="noopener noreferrer"
        [href]="file.thumbUrl || file.url"
        (click)="handlePreview(file, $event)">
        <img *ngIf="isImageUrl(file); else noThumbTpl" [src]="file.thumbUrl || file.url" [attr.alt]="file.name" />
      </a>
    </ng-template>
    <ng-template #noThumbTpl><i class="ant-upload-list-item-icon" nz-icon nzType="file" nzTheme="twotone"></i></ng-template>
    <ng-template #noPicTpl><i nz-icon [nzType]="file.status === 'uploading' ? 'loading' : 'paper-clip'"></i></ng-template>
  </ng-template>
  <ng-template #preview>
    <ng-container *ngIf="file.url; else prevText">
      <a [href]="file.thumbUrl || file.url" target="_blank" rel="noopener noreferrer" [attr.download]="file.linkProps && file.linkProps.download"
        (click)="handlePreview(file, $event)" class="ant-upload-list-item-name" title="{{ file.name }}">{{ file.name }}</a>
    </ng-container>
    <ng-template #prevText>
      <span (click)="handlePreview(file, $event)" class="ant-upload-list-item-name" title="{{ file.name }}">{{ file.name }}</span>
    </ng-template>
  </ng-template>
  <div class="ant-upload-list-item-info">
    <span *ngIf="file.status === 'error'" nz-tooltip [nzTitle]="file.message">
      <ng-template [ngTemplateOutlet]="icon"></ng-template>
      <ng-template [ngTemplateOutlet]="preview"></ng-template>
    </span>
    <span *ngIf="file.status !== 'error'">
      <ng-template [ngTemplateOutlet]="icon"></ng-template>
      <ng-template [ngTemplateOutlet]="preview"></ng-template>
    </span>
  </div>
  <ng-container *ngIf="listType === 'picture-card' && file.status !== 'uploading'; else close">
    <span class="ant-upload-list-item-actions">
      <a *ngIf="showPreview(file)" [href]="file.thumbUrl || file.url"
        target="_blank" rel="noopener noreferrer"
        title="{{ locale.previewFile }}"
        [ngStyle]="!(file.url || file.thumbUrl) && {'opacity': .5, 'pointer-events': 'none'}"
        (click)="handlePreview(file, $event)">
          <i nz-icon nzType="eye-o"></i>
      </a>
      <i *ngIf="icons.showRemoveIcon" (click)="handleRemove(file, $event)" nz-icon nzType="delete" title="{{ locale.removeFile }}"></i>
    </span>
  </ng-container>
  <ng-template #close>
    <i *ngIf="icons.showRemoveIcon" (click)="handleRemove(file, $event)" nz-icon nzType="close" title="{{ locale.removeFile }}"></i>
  </ng-template>
  <div *ngIf="file.status === 'uploading'" class="ant-upload-list-item-progress">
    <nz-progress [nzPercent]="file.percent" [nzShowInfo]="false" [nzStrokeWidth]="2"></nz-progress>
  </div>
</div>